<template>
  <el-dialog
    :title="title"
    v-model="open"
    width="800px"
    append-to-body
    :close-on-press-escape="false"
    :close-on-click-modal="false"
  >
    <div class="mb-2">已选择中{{ selectItems.length }}条</div>
    <el-table
      v-loading="loading"
      border
      stripe
      size="small"
      :data="resultList"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      max-height="600px"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="行业领域" align="center" prop="industryName" width="130" />
      <el-table-column label="类型" align="center" prop="catName" width="130" />
      <el-table-column label="名称" align="center" prop="name" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, ref, watch } from 'vue';
  import { listSdkLmKb } from '@/api/intelligencebase/sdkLmKb';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: 'add',
    },
    data: {
      type: Array,
      default: () => [],
    },
  });
  const emit = defineEmits(['update:modelValue', 'selected']);

  const resultList = ref([]);
  const selectItems = ref([]);
  const loading = ref(false);
  const open = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      emit('update:modelValue', val);
    },
  });

  watch(
    () => props.modelValue,
    (val) => {
      if (!val) return;
      init();
    },
  );

  function init() {
    getList();
  }

  function getList() {
    loading.value = true;
    listSdkLmKb()
      .then((res) => {
        const list = res?.data ?? [];
        resultList.value = list.filter((item) => {
          return !props.data.some((k) => k.kbId === item.id);
        });
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function cancel() {
    open.value = false;
  }

  function handleSelectionChange(selection) {
    selectItems.value = selection;
  }

  function submitForm() {
    open.value = false;
    emit('selected', selectItems.value);
  }

  function arraySpanMethod(item) {
    const { row, column, rowIndex, columnIndex } = item;
    const { property } = column;
    const value = row[property];
    if (columnIndex === 1 || columnIndex === 2) {
      if (rowIndex > 0) {
        const prevValue = resultList.value[rowIndex - 1][property];
        if (prevValue === value) {
          return [0, 0];
        }
      }
      if (rowIndex < resultList.value.length - 1) {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < resultList.value.length; i++) {
          const nextValue = resultList.value[i][property];
          if (nextValue === value) {
            rowspan += 1;
          } else {
            break;
          }
        }
        return [rowspan, 1];
      }
      return [1, 1];
    } else {
      return [1, 1];
    }
  }
</script>
